<template>
	<view class="placeAn">
		<view class="black_tab">
			<view @click="changeType(0)" class="text1" :class="current == 0?'action':''">我要买</view>
			<view @click="changeType(1)" class="text1" :class="current == 1?'action':''">我要卖</view>
		</view>
		
		<!-- <view class="black_1">
			<view @click="selectIndex(0)" class="text1" :class="index2 == 0?'action':''">ZY</view>
			<view @click="selectIndex(1)" class="text1" :class="index2 == 1?'action':''">汽油</view>
		</view> -->

		<view class="black_2">
			<view class="left">
				<view class="text1">{{inputNum}} {{index2==0?'ZY':'ZY'}}</view>
			</view>
			<view class="line"></view>
			<view class="left">
				<view class="text1">
					{{parseFloat(inputPrice)>0?inputPrice:start_unit_price}} {{index2==0?'CNY':'ZY'}}
				</view>
				<view class="text2">单价</view>
			</view>
		</view>

		<view class="black_4">
			<text class="text1">{{current == 0?'按数量购买':'按数量出售'}}</text>
			<view class="right">
				<uni-easyinput class="inputs inputs2" v-model="inputNum" type="digit" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" :placeholder="getPlace()"
					placeholder-style="color:#A7A7A7;font-size:25rpx"></uni-easyinput>
				<!-- <text class="text2">
					全部
				</text> -->
			</view>
		</view>
		<view class="black_4">
			<text class="text1">单价设定</text>
			<view class="right">
				<uni-easyinput class="inputs inputs2"  v-model="inputPrice" type="digit" :inputBorder="false"
					:styles="{backgroundColor: 'transparent'}" :placeholder='getPricePlaceholder()'
					placeholder-style="color:#A7A7A7;font-size:25rpx"></uni-easyinput>
			</view>
		</view>
		<!-- <view class="black_4" v-if="current !=1 && index2 != 1">
			<text class="text1">收款方式</text>
			<template v-if="payTypeUrl">
				<view class="right" @click="selectPayType()">
					<image class="payUrl" :src="'/static/tading/'+payTypeUrl+'.png'"></image>
				</view>
			</template>
			<template v-else>
				<view class="right"  @click="selectPayType()">
					<text class="text1">请选择付款方式</text> 
					<uni-icons type="right" size="12" color="#BDB4B4"></uni-icons>
				</view>
			</template>
		
		</view> -->
		<view class="black_5">
			温馨提示
		</view>
		<view class="black_6">
		<!-- 	<text class="text2">
				{{index2==0?'USDT数量范围':'汽油数量范围'}}:{{getNum()}}\n
			</text> -->
			<!-- <text class="text1">{{buy_sell_tip}}</text> -->
			<u-parse class="text1" :content="buy_sell_tip"  ></u-parse>
			<!-- <text class="text1">1.【实名付款】 请使用与平台实名信息一致的账户付款 \n2.【信用等级】成交单量，成交效率将影响您的信用等级，等级高的用 户交易推送靠前 \n3.【交易】请实时留意订单状态\n4.【售出】请务必确认收到款项再进行打币 \n5.【订单完成】确认收款后，请尽快打币完成交易，订单出现异常请第 时间暂停交易并申诉 \n6.未按规定操作，平台不予承担责任</text> -->
		</view>

		<view class="black_7" @click="showPay()">确认挂单</view>
		<payType ref="payType" :success='payTypeSucees' :add="addScuess"></payType>
		<!-- <tipsType ref="tipsType" :success='tipsTypeSucees'></tipsType> -->
		<!-- <addPayType ref="addPayType"></addPayType> -->
		<economyPay ref="economyPay" :success="economyPaySucees"></economyPay>
	</view>
</template>

<script>
	import payType from '@/components/pay/payType.vue'

	// import tipsType from '@/components/zmessage/tipsType.vue'
	// import addPayType from '@/components/pay/addPayType.vue'
	import economyPay from '@/components/pay/economyPay.vue'
	
	export default {
		components: {
			payType,
			economyPay
			// tipsType,
			// addPayType,
			
		},
		data() {
			return {
				current: 0,
				tab: ["我要买", "我要卖"],
				index: 0,
				num: 0,
				inputNum: '',
				type: false,
				list: [],
				start_num: 0,
				index2: 0,
				inputPrice: '',
				user: {
					"id": 0,
					"mobile": "",
					"p_id": 0,
					"nickname": "",
					"avatar": "http://zygq.opo5.com/uploads/avatar_default.png",
					"is_auth": 0,
					"level": 1,
					"accounts": [{
							"type": "",
							"amount": 0
						},
						{
							"type": "",
							"amount": "0.00"
						},
						{
							"type": "",
							"amount": 0
						},
						{
							"type": "",
							"amount": "0.00"
						}
					]
				},
				sell_v1_ratio: 0.0,
				sell_v2_ratio: 0.0,
				start_unit_price: 0.0,
				end_unit_price: 0.0,
				"llb_price_range": {
					"buy": "0",
					"sell": "0"
				},
				"durian_price_range": {
					"buy": "0",
					"sell": "0"
				},
				"durian_num_range": {
					"buy": "",
					"sell": ""
				},
				"llb_num_range": {
					"buy": "",
					"sell": ""
				},
				
				password: '',
				textName:'',
				payTypeUrl:'',
				cids:'',
				buy_sell_tip:'',
				gasoline_multiple_num:0,
				usdt_multiple_num:0
			};
		},
		onLoad() {
			this.api.http.requests('common/webSetting', {}, res => {
				this.sell_v1_ratio = res.data.sell_v1_ratio
				// this.sell_v2_ratio = res.data.sell_v2_ratio
				this.llb_price_range = res.data.zy_price_range
				// this.durian_price_range = res.data.gasoline_price_range
				// this.durian_num_range = res.data.zy_buy_sell_num
				this.llb_num_range = res.data.zy_buy_sell_num
				// this.usdt_multiple_num = res.data.usdt_multiple_num
				// this.gasoline_multiple_num = res.data.gasoline_multiple_num
				this.buy_sell_tip = res.data.buy_sell_tip
				this.getRange()
				this.getListNum()
			}, "POST")
			
			var that = this;
			this.api.http.requests('user/info', {}, res => {
				that.user = res.data
			}, "POST")
		},
		methods: {
			getPlace(){
				if(this.index2 == 0){
					return "请输入"+this.llb_num_range
				}else {
					return "请输入"
				}
			},
			selectPayType() {
				this.$refs.payType.open()
			},
			getNum(){
				// if(this.current == 0){
				// 	if(this.index2 == 0){
				// 		return this.llb_num_range.buy
				// 	}else {
				// 		return this.durian_num_range.buy
				// 	}
				// }else if(this.current == 1){
				// 	if(this.index2 == 0){
				// 		return this.llb_num_range.sell
				// 	}else {
				// 		return this.durian_num_range.sell
				// 	}
				// }
			},
			getTextName(){
				console.log(111,this.num)
				var num = parseFloat(this.inputNum>0?this.inputPrice*this.inputNum:this.num*this.inputPrice).toFixed(2)
				if(this.current == 0){
					this.textName =  this.index2 == 1? num+'个ZY':num+'元'
					console.log(111,this.textName)
				}else if(this.current == 1){
					this.textName =  this.index2 == 1? (this.num)+'ZY':(this.num)+'个ZY'
				}
			},
			selectIndex(index) {
				this.index = 0
				this.index2 = index
				this.num = this.list[index]
				this.inputPrice = ''
				this.getRange()
				this.getListNum()
				// this.getTextName()
			},
			setType() {
				this.type = !this.type
			},
			getListNum(){
				var list = []
				// if(this.current == 0){
				// 	//买
				// 	if(this.index2 == 0){ //LLB
				// 		list = this.llb_num_range.buy.split(',')
				// 	}else {//榴莲
				// 		list = this.durian_num_range.buy.split(',')
				// 	}
				// }else if(this.current == 1) {
				// 	//卖
				// 	if(this.index2 == 0){ //LLB
				// 		list = this.llb_num_range.sell.split(',')
				// 	}else {//榴莲
				// 		list = this.durian_num_range.sell.split(',')
				// 	}
				// }
				// this.list = list
				// this.num = Number(list[0])
				// this.inputNum = Number(list[0])
				// this.index =0
				return list
			},
			getNumPlaceholder() {
				return '请输入' + (this.current == 0 ? '' : '') + '数量(不低于' + this.start_num + '个)'
			},
			getPricePlaceholder() {
				var text = (this.index2 == 0) ? 'CNY' : 'ZY'
				var price = '(' + this.start_unit_price + '~' + this.end_unit_price + ')'
				if(this.start_unit_price == this.end_unit_price){
					return ""+text+this.start_unit_price
				}
			
				
				if (this.current == 0) {
					return '' + text + price
				}
				console.log('price = '+price)
				return '' + text + price
			},
			changeType(e) {
				this.current = e;
				this.inputPrice = ''
				this.getRange()
				this.getListNum()
				// this.getTextName()
			},
			onChage(i, num) {
				this.inputNum = Number(num)
				this.num = Number(num)
				this.index = i
				// this.getTextName()
			},
			inputNumChage(e) {
				this.inputNum = parseInt(e)
			},
			getAccounts(type) {
				var amount = '0.00'
				this.user.accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return parseInt(amount)
					}
				})
				return parseInt(amount)
			},
			getSellV1() {
				var le = 0.0
				if (this.current == 0) {
					le = parseFloat(this.inputPrice) * (parseFloat(this.sell_v1_ratio) / 100)
				} else {
					le = parseFloat(this.inputPrice) * (parseFloat(this.sell_v2_ratio) / 100)
				}
				return parseFloat(le).toFixed(2)
			},
			close() {
				this.$refs.pop_pay.close()
			},
			getRange() {
				var start_unit_price = 0.0;
				var end_unit_price = 0.0;
				var arr = []
				
				if (this.current == 0) {
					
					arr = this.index2 == 0 ? this.llb_price_range.buy.split("~") : this.durian_price_range.buy.split("~")
				} else {
					arr = this.index2 == 0 ? this.llb_price_range.sell.split("~") : this.durian_price_range.sell.split("~")
				}
				
				this.start_unit_price = parseFloat(arr[0])
				if(arr.length > 1){
					this.end_unit_price = parseFloat(arr[1])
				}else{
					this.end_unit_price = parseFloat(arr[0])
				}
				
			},
			showPay() {
				let num1 = Number(this.inputNum) > 0 ? this.inputNum : this.num
			
					
			
				this.getRange()
				if(!this.inputPrice){
						uni.showToast({
							title: '请输入价格',
							icon: "none"
						})
						return
				}
				let pri = parseFloat(this.inputPrice)
				
				console.log()
			// 	if (pri <= this.start_unit_price || pri >= this.end_unit_price) {
			
			// 		uni.showToast({
			// 			title: '单价范围' + this.start_unit_price + '~' + this.end_unit_price,
			// 			icon: "none"
			// 		})
			// 		return
			// 	}
				// if (this.index2 == 0 && this.current == 0 && !this.cids) {
				// 	uni.showToast({
				// 		title: '请选择付款方式',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if(this.current == 0 && this.index2 != 1){
					console.log(11111111)
					this.submit()
					return
				}
				console.log(2222222)
				pri = Number(this.inputNum)*pri
				if(this.index2 == 1 && this.current == 0){
					pri=pri+'ZY'
				}
				if(this.index2 == 0 && this.current == 1){
					pri=this.inputNum+'ZY'
				}
				if(this.index2 == 1 && this.current == 1){
					pri=this.inputNum+'ZY'
				}
				this.getTextName()
				let fei = Number(this.inputNum * this.inputPrice * (Number(this.sell_v1_ratio) / 100)).toFixed(2)
				console.log(333333333333,this.sell_v1_ratio)
				this.$refs.economyPay.open2(0,0,pri,fei)
			},
			submit() {
				if (this.index2 == 1 && !this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					})
					return
				}
				
				let num1 = Number(this.inputNum) > 0 ? this.inputNum : this.num
			
			
				// if (num1 < this.start_num) {
			
				// 	uni.showToast({
				// 		title: '数量不能少于' + this.start_num + '个',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				this.getRange()
			
				let pri = parseFloat(this.inputPrice)
			// 	if (pri < this.start_unit_price || pri > this.end_unit_price) {
			
			// 		uni.showToast({
			// 			title: '单价范围' + this.start_unit_price + '~' + this.end_unit_price,
			// 			icon: "none"
			// 		})
			// 		return
			// 	}
				
				let json = {
					num: num1,
					unit_price: pri,
					type: this.current == 0 ? 'buy' : 'sell',
					// account_type: this.index2 == 0 ? 'usdt' : 'gasoline',
					pay_password: this.password
					
				}
				// if(this.current == 0 && this.index2 == 0){
				// 	json.collection_id = this.cids
				// }
				var that = this
				this.api.http.requests('exchange/release', json, res => {
					uni.showToast({
						title: res.msg,
						success: function() {
							setTimeout(function() {
								//要延时执行的代码
								that.custom.tool.jump(4, 1);
							}, 3000) //延迟时间 
						}
					})
				}, "POST")
			},
			payTypeSucees(item){
				this.payTypeUrl = item.type
				this.cids = item.id
			},
			economyPaySucees(password){
				this.password = password
				this.submit()
			},
			addScuess(){
				this.custom.tool.jump(0, 'my/walletManagement');
			}
		}
	}
</script>

<style scoped lang="less">
	
	.black_tab{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 800;
		color: #969696;
		border-bottom: 2rpx solid #ECECEC;
		.text1 {
			width: 60px;
			text-align: center;
			margin-left: 10px;
			margin-right: 20px;
			// border-radius: 4rpx;
			padding: 15px 10px;
			// border-radius: 5px;
			// border-bottom: 2rpx solid #ABABAB;
		}
		
		.action {
			border-bottom: 2rpx solid #FE903D;
			font-weight: bold;
			color: #FE903D;
		}
	}
	.black_1 {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 800;

		color: #969696;
		padding: 20px 10px;
		border-bottom: 2rpx solid #ECECEC;

		.text1 {
			width: 60px;
			text-align: center;
			margin-left: 10px;
			margin-right: 20px;
			border-radius: 4rpx;
			padding: 5px 10px;
			border-radius: 5px;
			border: 2rpx solid #ABABAB;
		}

		.action {
			border: 2rpx solid #FE903D;
			font-weight: bold;
			color: #FE903D;
		}
	}

	.black_2 {
		font-size: 35rpx;
		font-weight: 800;
		color: #262626;
		display: flex;
		justify-content: space-between;
		padding: 20px 10px;
		border-bottom: 2rpx solid #ECECEC;

		.left {
			text-align: center;
			flex: 1;

			.text1 {}

			.text2 {
				font-size: 25rpx;
				font-weight: 400;
				color: #969696;
			}
		}

		.line {
			width: 1rpx;
			background-color: #ECECEC;
			;
		}
	}

	.black_3 {
		border-bottom: 2rpx solid #ECECEC;
		padding: 15px 10px;
		display: flex;
		align-items: center;

		.text1 {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.img {
			margin-left: 10px;
			width: 20px;
			height: 20px;
		}
	}

	.black_4 {
		border-bottom: 2rpx solid #ECECEC;
		padding: 15px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;

		.right {
			flex: 1;
			font-size: 25rpx;
			// font-weight: bold;
			color: #262626;
			display: flex;
			align-items: center;

			.text1 {
				margin-right: 10px;
				font-size: 25rpx;
				font-weight: 400;
				color: #969696;
			}

			.text2 {
				color: #FE903D;
			}

			.inputs {
				margin-right: 5px;
				text-align: end;

			}
			.payUrl{
				width: 20px;
				height: 20px;
			}
		}


	}

	.black_5 {
		font-size: 28rpx;
		font-weight: 800;
		color: #333333;
		padding: 20px 10px 0px 10px;
	}

	.black_6 {
		padding: 10px;

		.text1 {
			font-size: 23rpx;
			font-weight: 400;
			color: #969696;

		}
		.text2{
			color: red;
		}

	}

	.black_7 {
		margin: 40px 20px 20px 20px;
		background: #FE903D;
		border-radius: 14rpx;
		padding: 10px;
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>